<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Material of Analysis | 介绍</title>
    <meta name="description" content="The analytical data that you often use to learn">
    <link rel="icon" href="/material/logo.png">
  <link rel="manifest" href="/material/manifest.json">
  <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/material/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="/material/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/material/assets/css/0.styles.89749010.css" as="style"><link rel="preload" href="/material/assets/js/app.671f232e.js" as="script"><link rel="preload" href="/material/assets/js/9.6ad28882.js" as="script"><link rel="prefetch" href="/material/assets/js/1.a893eea4.js"><link rel="prefetch" href="/material/assets/js/2.ad32dd32.js"><link rel="prefetch" href="/material/assets/js/3.2af42d2c.js"><link rel="prefetch" href="/material/assets/js/4.b8a50edf.js"><link rel="prefetch" href="/material/assets/js/5.3a34f633.js"><link rel="prefetch" href="/material/assets/js/6.36baf8b1.js"><link rel="prefetch" href="/material/assets/js/7.23741c7b.js"><link rel="prefetch" href="/material/assets/js/8.0b506f6a.js"><link rel="prefetch" href="/material/assets/js/10.aa5bc1f8.js"><link rel="prefetch" href="/material/assets/js/11.b5d01b0b.js"><link rel="prefetch" href="/material/assets/js/12.2aab57fe.js"><link rel="prefetch" href="/material/assets/js/13.17c8fcb3.js"><link rel="prefetch" href="/material/assets/js/14.b0d8de38.js"><link rel="prefetch" href="/material/assets/js/15.95c4b4d8.js"><link rel="prefetch" href="/material/assets/js/16.8279b098.js"><link rel="prefetch" href="/material/assets/js/17.c88c3a9c.js"><link rel="prefetch" href="/material/assets/js/18.0635186f.js"><link rel="prefetch" href="/material/assets/js/19.5e722a99.js">
    <link rel="stylesheet" href="/material/assets/css/0.styles.89749010.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/material/" class="home-link router-link-active"><!----><span class="site-name">
      Material of Analysis
    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/material/basic/" class="nav-link">基础</a></div><a href="https://github.com/docschina/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/material/basic/" class="nav-link">基础</a></div><a href="https://github.com/docschina/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><!----></div><div class="page"><div class="content"><h1 id="介绍"><a href="#介绍" aria-hidden="true" class="header-anchor">#</a> 介绍</h1><p>VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。</p><p>由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。</p><h2 id="运行原理-how-it-works"><a href="#运行原理-how-it-works" aria-hidden="true" class="header-anchor">#</a> 运行原理(how it works)</h2><p>VuePress 网站实际上是由 <a href="http://vuejs.org/" target="_blank" rel="noopener noreferrer">Vue</a>, <a href="https://github.com/vuejs/vue-router" target="_blank" rel="noopener noreferrer">Vue Router</a> 和 <a href="http://webpack.js.org/" target="_blank" rel="noopener noreferrer">webpack</a> 驱动的单页面应用程序。如果你以前使用过 Vue，那么在编写或开发自定义主题时（甚至可以使用 Vue DevTools 来调试你的自定义主题！），你会融入到熟悉的开发体验中！</p><p>在构建过程中，我们会创建应用程序的服务器渲染版本，并且实际上是通过访问每个路由，来渲染相应的 HTML。这种方式受到 <a href="https://nuxtjs.org/" target="_blank" rel="noopener noreferrer">Nuxt</a> 的 <code>nuxt generate</code> 命令以及 <a href="https://www.gatsbyjs.org/" target="_blank" rel="noopener noreferrer">Gatsby</a> 等其他项目的启发。</p><p>每个 markdown 文件都使用 <a href="https://github.com/markdown-it/markdown-it" target="_blank" rel="noopener noreferrer">markdown-it</a> 编译为 HTML，然后作为 Vue 组件的模板进行处理。这允许你直接在 markdown 文件中使用 Vue，在需要嵌入动态内容时，这种使用方式非常有用。</p><h2 id="特性-features"><a href="#特性-features" aria-hidden="true" class="header-anchor">#</a> 特性(features)</h2><ul><li><a href="/material/guide/markdown.html">内置 markdown 扩展</a>，针对技术文档进行了优化</li><li><a href="/material/guide/using-vue.html">能够利用内嵌在 markdown 文件中的 Vue 代码</a></li><li><a href="/material/guide/custom-themes.html">以 Vue 驱动的自定义主题系统</a></li><li>自动生成 Service Worker</li><li>Google Analytics 集成</li><li>多语言支持</li><li>一个默认主题：
<ul><li>响应式布局</li><li>可选的主页</li><li>简单、开箱即用、基于标题的搜索功能</li><li>可定制的导航栏和侧边栏</li><li>自动生成的 GitHub 链接和页面编辑链接</li></ul></li></ul><h2 id="待实现特性-todo"><a href="#待实现特性-todo" aria-hidden="true" class="header-anchor">#</a> 待实现特性(todo)</h2><p>VuePress 的开发仍在进行中。有几件目前不支持，但计划做的功能：</p><ul><li>博客支持</li></ul><p>欢迎贡献！</p><h2 id="为什么不使用下面这些工具？"><a href="#为什么不使用下面这些工具？" aria-hidden="true" class="header-anchor">#</a> 为什么不使用下面这些工具？</h2><h3 id="nuxt"><a href="#nuxt" aria-hidden="true" class="header-anchor">#</a> Nuxt</h3><p>VuePress 能做的事情，Nuxt 也同样能够实现，但是，它是为构建应用程序而设计的。而 VuePress 专注于以内容为中心的静态网站，并且为开箱即用的技术文档，提供量身定制的功能。</p><h3 id="docsify-docute"><a href="#docsify-docute" aria-hidden="true" class="header-anchor">#</a> Docsify / Docute</h3><p>二者都是伟大的项目，也都是以 Vue 驱动。但它们完全是运行时驱动(runtime-driven)的项目，因此不适合 SEO 优化。如果你不关心 SEO 优化，也不想因为安装依赖而扰乱心神，这些仍然是不错的选择。</p><h3 id="hexo"><a href="#hexo" aria-hidden="true" class="header-anchor">#</a> Hexo</h3><p>Hexo 一直在为 Vue 文档提供服务 - 事实上，离我们的主站完全迁移到 VuePress，可能还要经过一段时间。其中最大的问题是，它的主题系统是非常静态和基于字符串的 - 我们确实需要利用 Vue 来实现布局和交互。此外，无法对 Hexo 的 markdown 渲染，进行极其灵活的配置。</p><hr><blockquote><p>原文：<a href="https://vuepress.vuejs.org/guide/" target="_blank" rel="noopener noreferrer">https://vuepress.vuejs.org/guide/</a></p></blockquote><hr></div><div class="content edit-link"><a href="https://github.com/docschina/vuepress/edit/master/docs/guide/README.md" target="_blank" rel="noopener noreferrer">在GitHub上编辑此页</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><!----></div></div></div>
    <script src="/material/assets/js/9.6ad28882.js" defer></script><script src="/material/assets/js/app.671f232e.js" defer></script>
  </body>
</html>
